<template>
 <div class="advertise-table">
    <div class="legend" slot="title">
       <span class="legend-name">推广位一览表</span>
       <span class="legend-icon empty">空位</span>
       <span class="legend-icon part">部分空位</span>
       <span class="legend-icon full">已满</span>
       <span class="legend-icon expire">已满，部分即将到期</span>
    </div>
    <div class="count">
        <span class="name">学科网主站</span>
        <span class="total">共<i>12</i>位</span> - 
        <span class="empty"><i>5</i>空位</span> - 
        <span class="full"><i>7</i>满位</span>
    </div>
    <table class="advertise">
        <tbody>
        <tr>
           <td class="title">首页</td>
           <td>
                <div class="space expire">
                   <span class="name">单张轮播</span>
                   <span class="limit">即将到期</span>
                   <span class="add">+</span>
                </div>
           </td>
           <td>
                <div class="space part">
                   <span class="name">单张轮播</span>
                   <span class="limit">即将到期</span>
                   <span class="add">+</span>
                </div>
           </td>
           <td>
                <div class="space empty">
                   <span class="name">单张轮播</span>
                   <span class="limit">即将到期</span>
                   <span class="add">+</span>
                </div>
           </td>
        </tr>
        <tr>
           <td class="title">资料详情页</td>
           <td>
                <div class="space empty">
                   <span class="name">预览插图</span>
                   <span class="limit">即将到期</span>
                   <span class="add">+</span>
                </div>
           </td>
           <td>
                <div class="space full">
                   <span class="name">右侧双图</span>
                   <span class="limit">即将到期</span>
                   <span class="add">+</span>
                </div>
           </td>
           <td>
                <div class="space">
                   <span class="name"></span>
                   <span class="limit"></span>
                   <span class="add">+</span>
                </div>
           </td>
        </tr>
        </tbody>
    </table>
 </div>
</template>
<script>
</script>
<style lang="scss" scoped>
.advertise-table{
    background: #fff;
    .legend{
        height:18px;
        line-height: 18px;
        .legend-name{
            display: inline-block;
            margin-right:36px;
            height:18px;
            font-size:18px;
            color: #0F1B41;
            vertical-align:top;
        }
        .legend-icon{
            position: relative;
            padding-left:29px;
            margin-right:36px;
            display: inline-block;
            vertical-align:top;
            font-size: 13px;
            color: #FE4509;
            &:before{
                position: absolute;
                left:0;
                top:0;
                content:'';
                width:18px;
                height:18px;
                border-radius: 2px;
                background: #FE4509;
            }
            &.empty{
                color: #FE4509;
                &:before{
                    background:#FE4509;
                }
            }
            &.part{
                color:#FFA280;
                &:before{
                    background:#FFA280;
                }
            }
            &.full{
                color: #D3EFB9;
                &:before{
                    background:#D3EFB9;
                }
            }
            &.expire{
                color:#A2DA69;
                &:before{
                    background: #A2DA69;;
                }
            }
        }
    }
    .count{
        margin-top: 46px;
        height:16px;
        .name{
            display: inline-block;
            vertical-align: top;
            font-size: 16px;
            color: #0F1B41;
            line-height: 16px;
        }
        .total,.empty,.full{
            display: inline-block;
            vertical-align: top;
            font-size: 13px;
            color: #0F1B41;
            line-height: 16px;
            i{
                font-size: 18px;
            }
        }
        .empty{
            color:#FE4509;
        }
        .full{
            color:#5AAC00 ;
        }
    }
    .advertise{
        margin-top:26px;
        td{
            position: relative;
            width:90px;
            height:86px;
            border: 1px solid #F5F7FD;
            overflow: hidden;
            &:hover{
                overflow: visible;
                .space{
                  z-index: 10;
                }
            }
        }
        .space{
            position: absolute;
            cursor: pointer;
            width:94px;
            height: 90px;
            top:-2px;
            left:-2px;
            background: #fff;
            cursor: pointer;
            .name{  
                position: absolute;
                top:14px;
                left:14px;
                font-size: 14px;
                color: #fff;
                line-height: 14px;
            }
            .limit{
                position: absolute;
                left:14px;
                bottom:14px;
                font-size: 12px;
                color: #fff;
                opacity: 0.8;
            }
            .add{
                display: none;
                position: absolute;
                bottom:21px;
                margin:0 auto;
                left:0;
                right:0;
                opacity: 0.8;
                width:20px;
                height:20px;
                border:1px solid #fff;
                border-radius: 6px;
                text-align: center;
                line-height: 20px;
                color:#fff;
            }
        }

        .title{
            padding-left:15px;
            font-size: 15px;
            color: #B6BCC8;
            font-size:700;
            background: #F2F3F5;
        }
        .expire{
            background: #A2DA69; 
        }
        .part{
            background: #FFA280 ; 
        }
        .empty{
            background: #FE4509; 
            .add{
                display: block;
            }
            .limit{
                display: none;
            }
        }
        .full{
            background:  #D3EFB9;
        }
    }
}
</style>  
